<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
    <style>
        html{
            border: 0;
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        body{
            margin: 0;
            border: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }

        #background{
            background: repeating-linear-gradient(359deg, rgb(182 196 255) 0%, rgb(207 225 255 / 78%) 100%);
            min-height: 100%;
            min-width: 100%;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        #display{
            background-color: #ffffff85;
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            padding: 1rem;
            border-radius: 2rem;
            max-width: 500px;
            margin-top: 5rem;
            margin-bottom: 5em;
            margin-left: 3%;
            margin-right: 3%;
        }
        #display > h1{
            margin: 0 0 0.5rem 0;
        }
        #display > h3{
            margin: 0 0 0.5rem 0;
        }
        #imgs{
            display: flex;
            flex-direction: row;
            align-items: stretch;
            flex-wrap: wrap;
        }
        #imgs>img{
            display: block;
            width: 48%;
            margin: 1%;
            transition: all 0.8s;
            cursor: pointer;
        }

        #imgs>img:hover{
            margin: 0.5% 1.5% 1.5% 0.5%;
            box-shadow: #00000087 0.2rem 0.2rem 1rem 0px;
            transition: all 0.3s;
        }


        /* 窄窗口 */
        @media screen and (max-width:550px){
            #imgs>img{
                display: block;
                width: 98%;
                margin: 1%;
            }
        }
        /*手机 css*/
        @media screen and (orientation:portrait) and (max-device-width:800px) and (max-device-height:1000px){
            :root {
                font-size: 2rem;
            }
            #imgs>img{
                display: block;
                width: 98%;
                margin: 1%;
            }
            #display{
                max-width:98vw;
            }
        }
    </style>
    <script src="./js/other/stats.js"  async="async"></script>
</head>
<body>
<div id="background">
    <div id="display">
        <h1>生成的图片</h1>
        <h2 id="createMessage">未知生成语句</h2>
        <div id="imgs"></div>
    </div>

</div>
<script src="./js/imgs.js"></script>
</body>
</html>